<template>
	<view class="container">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="s_run" >
				<view class="counDdown" v-for="(item,index) in arr" :key="index">
					<view class="tit">500 CPM</view>
					<view class="demo-music">
					    <view class="waves">
							<view v-for="(item,index) in 34" :key="index"></view>
					    </view>
					</view>
					<view class="counlist">
						<view class="list" v-show='!item.id'>
							<view>机器编号<text >202209108048638866</text></view>
							<view>启动日期<text >2022-09-10 14:43:08</text></view>
							<view>解锁时间<text >2022-09-20 14:43:08</text></view>
							<view>机器状态<text class="on">运行中</text></view>
							<view>锁仓额度<text class="on fb">500 ADC</text></view>
							<view>到期收益<text class="on fb">12% = 60.00 ADC</text></view>
						</view>
					</view>
					<view class="cdown">
						<view>解锁倒计时</view>
						<view class="dateFormat"><u-count-down :time="30 * 60 * 60 * 100" format="HH h : mm m : ss s : SSS" autoStart millisecond></u-count-down></view>
						<view @click="item.id=!item.id" v-if='item.id'><image src="/static/images/g_img11.png"></image></view>
						<view @click="item.id=!item.id" v-else-if='!item.id'><image src="/static/images/g_img12.png"></image></view>
					</view>
				</view>
				
			</view>																						
		</mescroll-body>
	</view>
</template>

<script>
	//加载列表数据循环元素体文件：mescroll-swiper
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	
	export default{
		mixins: [MescrollMixin],
		data(){
			return{
				/*mescroll swiper S*/
				//数据列表
				result: [],
				//设置api路径
				api_url : 'demo/waterfall',
				/*mescroll swiper E*/
				//运行中
				arr:[
					{id:1},
					{id:2}
				]
			}
		},																															
		methods:{
			upCallback(page) {
			    self = this;
			    //获取api数据
			    this.ajax({
			        url: self.api_url,
			        data:{
			            page: page.num,
			            pagesize: page.size
			        }
			    }).then(res => {
			        //如果res.list不是object则赋值为空对象[]
			        let result_ = (typeof(res.data.data)=='object')?res.data.data:[];
			        let result_length = result_.length;
			        //如果是第一页，则将列表数据清空
			        if(page.num == 1)
			            self.list = [];
			        //数据去重：防止最近产生的新数据导致有重复数据
			        result_ = self.$my.filterSame(result_, self.result);
			        //设置列表数据
			        self.result = self.$my.join(self.result, result_); //追加新数据
			        //api获取成功，隐藏下拉刷新和上拉加载的状态（延时0.3秒再关闭加载动画，视觉效果更踏实）
			        //特别注意: 这里加setimeout延时可能会导致mescroll-more插件 (快速上滑加载分页会异常中断)
			        setTimeout(() => {
			            this.mescroll.endSuccess(result_length);
			        },10);
			    }).catch(()=>{
			        //联网失败, 结束加载
			        this.mescroll.endErr();
			    });
			},
		},
	}
</script>

<style lang="scss">
	@import url("../../common/style.scss");
	@import url("machine.scss");
	@import url("music.scss");
	
	.container{
		padding-top: 0 !important;
	}
	.container  .mescroll-body{
		min-height: auto !important;
	}
	.counlist .list view:nth-child(1){
		border-top: none;
	}
	.counDdown .cdown{
		background-color: #4AB893;
		padding: 27rpx 0 30rpx;
		font-size: 28rpx;
		line-height: 31rpx;
		color: #474443;
		text-align: center;
	}
	.container .dateFormat .u-count-down__text{
		color: #FEFEFE;
		font-size: 35rpx;
		line-height: 75rpx;
	}
</style>